<template>
  <div class="my_memder">
    <div class="memder_logo">
      <div class="centre memder_logo_header">
        <router-link
          to="/"
          tag="img"
          src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
          alt
        ></router-link>
        <span>我的 VIP</span>
      </div>
    </div>
    <div class="memder_header">
      <div class="centre header_memder">
<<<<<<< HEAD
        <div v-if="MyList.vip < 2" class="memder_img">
=======
        <div class="memder_img">
>>>>>>> 314b442cce11d658746227581b0160373004c345
          <img src="@/assets/img/vip1.png" alt />
          <router-link
            :to="{
             name: '/MyMember/Member',
            params: {
              tyle: 1
            }
          }"
            tag="div"
            class="memder_deatil"
          ></router-link>
        </div>
<<<<<<< HEAD

=======
        <!-- <div class="memder_img">
          <img src="@/assets/img/vip2.png" alt />
          <router-link
            :to="{
             name: '/MyMember/Member',
            params: {
              tyle: 2
            }
          }"
            tag="div"
            class="memder_deatil"
          ></router-link>
        </div> -->
>>>>>>> 314b442cce11d658746227581b0160373004c345
        <div class="memder_img">
          <img src="@/assets/img/vip2.png" alt />
          <router-link
            :to="{
             name: '/MyMember/Member',
            params: {
              tyle: 3
            }
          }"
            tag="div"
            class="memder_deatil"
          ></router-link>
        </div>
      </div>

<<<<<<< HEAD
      <router-view></router-view>
=======
     
        
          <router-view></router-view>
        
      
>>>>>>> 314b442cce11d658746227581b0160373004c345
    </div>
  </div>
</template>

<script>
export default {
<<<<<<< HEAD
  neam: "MyMemder",
  data() {
    return {
      MyList: ""
    };
  },
  methods: {
    getPersonal() {
      this.$ajax({
        method: "POST",
        url: "/api/query/userInfo",

        success: res => {
          if (res.data.code == 0) {
            this.MyList = res.data.data;
          } else {
            this.open3(res.data.msg);
          }
        }
      });
    }
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.getPersonal();
    });
  }
=======
  neam: "MyMemder"
>>>>>>> 314b442cce11d658746227581b0160373004c345
};
</script>

<style lang="scss">
.my_memder {
  background: #f6f6f6;

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
  .memder_logo {
    background: #fff;
    .memder_logo_header {
      background: #fff;
      padding: 10px 0;
      img {
        width: 48px;
      }
      span {
        font-size: 22px;
        color: #5e5e5e;
        padding-left: 24px;
        position: relative;
        top: -18px;
      }
    }
  }
  .memder_header {
    .header_memder {
      display: flex;
<<<<<<< HEAD
      justify-content: space-around;
=======
      justify-content:space-around;
>>>>>>> 314b442cce11d658746227581b0160373004c345
      .memder_img {
        margin: 70px 0;
        width: 340px;
        height: 196px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        img {
<<<<<<< HEAD
          width: 100%;
          height: 100%;
=======
         width:100%;
         height:100%;
>>>>>>> 314b442cce11d658746227581b0160373004c345
        }
      }
      .memder_deatil {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background: rgba($color: #000000, $alpha: 0.3);
        z-index: 10;
      }
      .router-link-active {
        display: none;
      }
    }
  }
}
</style>